<template>
  <component v-if="use" :is="component()" :ocean="isOceanComponent && use" v-bind="(isOcean && use.attrs) || $attrs">
    <template v-for="(item, k, i) in $slots" :key="i" v-slot:[k]>
      <slot :name="k"></slot>
    </template>
  </component>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{ use: any }>();
const isOcean = computed(() => props.use?.isOcean);
const isOceanComponent = computed(() => props.use?.isOceanComponent);
const component = computed(() => {
  if (isOcean.value) {
    return props.use.oceanComponent
  }
  if (typeof props.use == 'function') {
    return props.use
  }
  return () => props.use;
});
</script>